import Graph from './utils/Graph'
import './index.scss'
import { useCallback, useEffect, useRef } from 'react'
import { Card, Accordion, AccordionSummary, AccordionDetails, Button } from '@mui/material'
import { ExpandMore } from '@mui/icons-material'

const Draw = () => {
  const container = useRef(null)
  const generalRef = useRef(null)
  const graphInstance = useRef(null)

  useEffect(() => {
    graphInstance.current = new Graph(container.current)
    graphInstance.current.initialDefaultStyles()
    graphInstance.current.addGeneralPalette(generalRef.current)
  }, [])

  const test = useCallback(() => {
    console.log(graphInstance.current.graph.getSelectionCell())
  }, [])

  return (
    <div className='draw'>
      <Button onClick={() => test()}>测试</Button>
      <Card className='toolbar'>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMore />}
          >
            General
          </AccordionSummary>
          <AccordionDetails>
            <div ref={generalRef} style={{ display: 'inline-flex', flexWrap: 'wrap' }}></div>
          </AccordionDetails>
        </Accordion>
      </Card>
      <Card className='draw-container' ref={container}></Card>
    </div>
  )
}

export default Draw